import React from 'react'
import { ListView, PullToRefresh } from 'antd-mobile'

import {get} from '../../axios'
import moment from 'moment'

import {MyBody, genData, separator} from '../listview-func'

export default (url, row, classname='profit') => WrappedComponent =>
    class Hoc extends React.Component {
        constructor(props) {
            super(props)
            this.dataBlob = {};
    
            const getSectionData = (dataBlob, sectionID) => this.dataBlob[sectionID];
            const getRowData = (dataBlob, sectionID, rowID) => { return dataBlob[sectionID] ? dataBlob[sectionID][rowID] : null};
        
            const dataSource = new ListView.DataSource({
                getRowData,
                getSectionHeaderData: getSectionData,
                rowHasChanged: (row1, row2) => row1 !== row2,
                sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
            });
            this.state = {
                i: 0,
                dataSource,
                isLoading: true,
                refreshing: false,
                hasMore: true, 
                current_page: 1
            }
        }
    
        componentDidMount() {
            this.fetch_data()
        }
    
        fetch_data(page=1) {
            get(`${url}?page=${page}`).then(resp => {
                if (resp) {
                    let {dataBlobs, sectionIDs, rowIDs} = genData(this.dataBlob, resp.current_page, resp.data)
                    this.setState({
                        current_page: resp.current_page,
                        isLoading: false,
                        refreshing: false,
                        hasMore: resp.next_page_url!=null,
                        dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
                    });
                }
            })
        }
    
        onEndReached = (event) => {
            if (this.state.isLoading || !this.state.hasMore) {
                return;
            }
            console.log('reach end', event);
            this.setState({ isLoading: true });
            this.fetch_data(this.state.current_page+1)
        }
    
        onRefresh = () => {
            console.log('refresh')
            this.dataBlob = {}
            this.setState({ refreshing: true, isLoading: true }, ()=>this.fetch_data());
        }
    
        render() {
           
            return (
                <React.Fragment>
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    renderFooter={() => (<div style={{ textAlign: 'center' }}>
                        {this.state.isLoading ? '正在加载...' : (this.state.hasMore ? '还有更多项' : '已经是最后一条记录')}
                        </div>)}
                    renderBodyComponent={() => <MyBody classname={classname}/>}
                    renderRow={row}
                    useBodyScroll
                    pageSize={5}
                    onScroll={() => { console.log('scroll'); }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    scrollerOptions={{ scrollbars: true }}
                    pullToRefresh={<PullToRefresh
                        refreshing={this.state.refreshing}
                        onRefresh={this.onRefresh}
                    />}
                />
                <WrappedComponent {...this.props} />
                </React.Fragment>
            )
        }
    }